import React, { Component } from 'react'
import {Table,Button,Tag,MessageBox, Form,Select,Pagination, Message, Input} from "element-react";


export default class Approverpage extends Component {
  refresh = ()=>{
    fetch("/device/devicelendrecord/list",{
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify({page:this.state.page.currentPage})
    })
    .then(data=>data.json())
    .then(result=>{
      this.setState({data:result.page.list , page :{
        total: result.page.totalPage,
        pageSize:  result.page.pageSize,
        currentPage: result.page.currPage,
      }
    })
    })
  }
  componentDidMount(){
    this.refresh()
    this.timer = setInterval(() => {
      this.refresh()
    }, 3000);
  }
  componentWillUnmount(){
    clearInterval(this.timer)
  }
    statusmap={
        0:{
            tag:"primary",
            name:"待审批"
        },
        1:{
            tag:"warning",
            name:"审批取消"
        },
        2:{
            tag:"success",
            name:"审批通过"
        },
        3:{
            tag:"danger",
            name:"未通过"
        },
        4:{
          tag:"warning",
          name:"已出库"
        },
        5:{
          tag:"success",
          name:"已归还"
        },
        6:{
          tag:"danger",
          name:"出库失败"
        },
        7 : {
          tag:"danger",
          name:"归还审批"
        },
        8 : {
          tag:"success",
          name:"归还成功"
        },
        9 :{
          tag:"danger",
          name:"归还失败"
        },
        10:{
          tag:"danger",
          name:"购入审批"
        },
        11:{
          tag:"success",
          name:"购入通过"
        },
        12:{
          tag:"danger",
          name:"购入驳回"
        },
        13:{
          tag:"warning",
          name:"购入取消"
        },
        14:{
          tag:"warning",
          name:"维修审批"
        },
        15:{
          tag:"warning",
          name:"维修审批"
        },
        16:{
          tag:"warning",
          name:"维修审批"
        },
    } 
    state = {
        columns: [
          {
            fixed: 'left',
            align:"center",
            type:"index",
          },
          {
            label: "审批单号",
            prop: "id",
            width: 180,
            fixed: 'left',
            align:"center"
          },
          {
            label: "审批设备号",
            prop: "deviceid",
            width: 180,
            align:"center"
          },
          {
            label:"设备名称",
            prop:"devicename",
            align:"center",
            width: 180
          },
          {
            label: "申请人编号",
            align:"center",
            prop: "userid"
          },
          {
            label:"申请日期",
            align:"center",
            prop:"lenddate",
            width:200
          },
          {
            label: "申请人",
            align:"center",
            prop: "username"  
          },
          {
            label:"状态",
            align: 'center',
            width: 100,
            render: (row, column, index)=>{
              return (
                <Tag
                type={this.statusmap[row.status].tag}
                >{this.statusmap[row.status].name}</Tag>
              )
            },
          },
          {
            label:"操作",
            align: 'center',
            fixed: 'right',
            width: 100,
            render: (row, column, index)=>{
              return (
                <span style={{display:"flex"}}>
                    <Button plain={true} 
                    type="info" 
                    size="small"
                    icon='edit'
                    disabled={!(row.status===0||row.status===10)}
                    onClick={this.approverRecord.bind(this,index)} ></Button>
                    {/* <Button type="danger" size="small">移除</Button> */}
                </span>
              )
            }
          }
        ],
        data: [],
        page:{
          currentPage:1
        }
    }
  approverRecord(index){
    if(this.state.data[index].status===10) {
      this.approverBuyRecord(index);
    } else {
      this.approverLendRecord(index) 
    }

  }
  approverBuyRecord = (index) =>{
    fetch("/device/devicepayinfo/getInfo" , {
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify({
        id : this.state.data[index].id
      })
    })
    .then(data=>data.json())
    .then(result=>{
      console.log(result)
      MessageBox.msgbox({
        message:(
          <Form>
            <Form.Item label='设备类型'>
            <Tag type="primary">{result.info.label}</Tag>
             {/* {result.info.label} */}
            </Form.Item>
            <Form.Item label={`单价`}>
            <Tag type="primary"> {result.info.price}{"￥"}</Tag>
            
            </Form.Item>
            <Form.Item label='总数量'>
            <Tag type="primary"> {result.info.nums}</Tag>
            
            </Form.Item>
            <Form.Item label='总金额'>
            <Tag type="primary">{result.info.nums*result.info.price}{"￥"}</Tag>
              
            </Form.Item>
            <Form.Item label='申请事由'>
              <Input 
              type='textarea' 
              readOnly={true} 
              resize={"none"}
              size={"large"}
              autosize={{ minRows: 6, maxRows: 6}}
              placeholder={"暂无事由"}
              value={this.state.data[index].msg}></Input>
            </Form.Item>
            <Form.Item label='意见'>
              <Select onChange={(e)=>{this.currdevicestatus = e }}>
                <Select.Option label={"审批通过"} value={11}/>
                <Select.Option label={ "驳回" } value={12}/>
              </Select>
            </Form.Item>
          </Form>
        ),
        showCancelButton:true
      }).then(action=>{
        if(action==="confirm") {
          this.state.data[index].status = this.currdevicestatus ;
          fetch("/device/devicelendrecord/update" , {
            method:"POST",
            headers:{
              "Content-Type": "application/json",
            },
            body:JSON.stringify(this.state.data[index])
          }).then(data=>data.json())
          .then(reuslt=>{
              this.setState({data:[...this.state.data]})
              Message({
                type:reuslt.msg,
                message:"操作成功"
              })
          })
        }
      })
    })
  }

  approverLendRecord = (index)=>{
    MessageBox.msgbox({
      message:(
        <Form>
          <Form.Item label='申请事由'>
            <Input 
            type='textarea' 
            readOnly={true} 
            resize={"none"}
            size={"large"}
            autosize={{ minRows: 6, maxRows: 6}}
            value={this.state.data[index].msg}></Input>
          </Form.Item>
          <Form.Item label='意见'>
            <Select onChange={(e)=>{this.currdevicestatus = e }}>
              <Select.Option label={"审批通过"} value={2}/>
              <Select.Option label={ "驳回" } value={3}/>
            </Select>
          </Form.Item>
        </Form>
      ),
      showCancelButton:true
    }).then(action=>{
      if(action==="confirm") {
        fetch("/device/devicelendrecord/update" , {
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({
            id:this.state.data[index].id ,
            status: this.currdevicestatus 
          })
        }).then(data=>data.json())
        .then(reuslt=>{
            this.state.data[index].status = this.currdevicestatus ;
            this.setState({data:[...this.state.data]})
            Message({
              type:reuslt.msg,
              message:"操作成功"
            })
        })
      }
    })
  }



  pagechange = (currentPage)=>{
    fetch("/device/devicelendrecord/list",{
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify({page:currentPage})
    }).then(data=>data.json())
    .then(result =>{
      this.setState({data:result.page.list , page :{
        total: result.page.totalPage,
        pageSize:  result.page.pageSize,
        currentPage: result.page.currPage,
      }})

    })
  }


  render() {
    return (
      <div>
        <Table
        style={{width: '100%'}}
        columns={this.state.columns}
        data={this.state.data}
        stripe={true}
        />
        <div className="block" style={{}}>
          <Pagination layout="prev, pager, next" 
          pageCount={this.state.page.total} 
          pageSize={this.state.page.pageSize}
          currentPage={this.state.page.currentPage}
          onCurrentChange={this.pagechange}/>
        </div>
      </div>
    )
  }
}
